<template>
  <div class="rankings-container">
    <el-card class="rankings-card">
      <template #header>
        <div class="card-header">
          <h2>健身排行榜</h2>
          <div class="header-options">
            <!-- 排行榜类型选择 -->
            <el-radio-group v-model="activeTab" @change="handleTabChange" size="small">
              <el-radio-button label="DURATION">健身时长</el-radio-button>
              <el-radio-button label="CALORIES">卡路里消耗</el-radio-button>
              <el-radio-button label="GOAL_COMPLETION">目标完成率</el-radio-button>
            </el-radio-group>
            
            <!-- 时间范围选择 -->
            <el-radio-group v-model="timeRange" @change="handleTimeRangeChange" size="small" style="margin-left: 16px;">
              <el-radio-button label="DAY">日榜</el-radio-button>
              <el-radio-button label="WEEK">周榜</el-radio-button>
              <el-radio-button label="MONTH">月榜</el-radio-button>
              <el-radio-button label="YEAR">年榜</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </template>
      
      <div v-loading="loading" class="rankings-content">
        <!-- 排行榜列表 -->
        <el-table :data="rankings" style="width: 100%" :empty-text="emptyText">
          <el-table-column label="排名" width="80">
            <template #default="scope">
              <div class="rank-item">
                <div v-if="scope.row.rank <= 3" class="rank-badge rank-{{ scope.row.rank }}">
                  {{ scope.row.rank }}
                </div>
                <span v-else class="rank-number">{{ scope.row.rank }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column label="用户" min-width="180">
            <template #default="scope">
              <div class="user-info">
                <span class="username">{{ scope.row.username }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column :label="valueLabel" prop="valueLabel" align="right"></el-table-column>
        </el-table>
        
        <!-- 暂无数据提示 -->
        <div v-if="rankings.length === 0 && !loading" class="empty-data">
          <el-empty description="暂无排行数据"></el-empty>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { getDurationRankings, getCaloriesRankings, getGoalCompletionRankings } from '@/api/statistics'

export default {
  name: 'RankingsList',
  setup() {
    // 当前激活的标签
    const activeTab = ref('DURATION')
    // 当前选择的时间范围
    const timeRange = ref('MONTH')
    // 排行榜数据
    const rankings = ref([])
    // 加载状态
    const loading = ref(false)
    // 空数据提示文本
    const emptyText = ref('加载中...')
    
    // 根据当前活动的选项卡计算显示的标签
    const valueLabel = computed(() => {
      switch (activeTab.value) {
        case 'DURATION':
          return '健身时长'
        case 'CALORIES':
          return '消耗卡路里'
        case 'GOAL_COMPLETION':
          return '目标完成率'
        default:
          return '数值'
      }
    })
    
    // 计算时间范围的显示标题
    const timeRangeTitle = computed(() => {
      switch (timeRange.value) {
        case 'DAY':
          return '今日排行'
        case 'WEEK':
          return '本周排行'
        case 'MONTH':
          return '本月排行'
        case 'YEAR':
          return '年度排行'
        default:
          return '排行榜'
      }
    })
    
    // 加载排行榜数据
    const loadRankings = async () => {
      loading.value = true
      rankings.value = []
      try {
        let response
        switch (activeTab.value) {
          case 'DURATION':
            response = await getDurationRankings(10, timeRange.value)
            break
          case 'CALORIES':
            response = await getCaloriesRankings(10, timeRange.value)
            break
          case 'GOAL_COMPLETION':
            response = await getGoalCompletionRankings(10, timeRange.value)
            break
          default:
            response = await getDurationRankings(10, timeRange.value)
        }
        
        rankings.value = response || []
        if (rankings.value.length === 0) {
          emptyText.value = '暂无排行数据'
        }
      } catch (error) {
        console.error('获取排行榜数据失败', error)
        emptyText.value = '获取数据失败，请稍后重试'
      } finally {
        loading.value = false
      }
    }
    
    // 处理标签切换
    const handleTabChange = () => {
      loadRankings()
    }
    
    // 处理时间范围切换
    const handleTimeRangeChange = () => {
      loadRankings()
    }
    
    // 组件挂载时加载数据
    onMounted(() => {
      loadRankings()
    })
    
    return {
      activeTab,
      timeRange,
      rankings,
      loading,
      emptyText,
      valueLabel,
      timeRangeTitle,
      handleTabChange,
      handleTimeRangeChange
    }
  }
}
</script>

<style scoped>
.rankings-container {
  padding: 20px;
}

.rankings-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.header-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.rankings-content {
  min-height: 400px;
}

.rank-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-weight: bold;
}

.rank-number {
  color: #333;
  font-weight: bold;
}

.rank-1 {
  background-color: #FFD700; /* 金 */
}

.rank-2 {
  background-color: #C0C0C0; /* 银 */
}

.rank-3 {
  background-color: #CD7F32; /* 铜 */
}

.user-info {
  display: flex;
  align-items: center;
}

.username {
  font-weight: 500;
  color: #333;
}

.empty-data {
  margin-top: 30px;
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header-options {
    margin-top: 10px;
    width: 100%;
    justify-content: space-between;
  }
  
  .el-radio-group {
    margin-top: 8px;
  }
}
</style> 